<template>
	<view class="page-container">
		<!-- 内容区域 -->
		<view class="container">
			<!-- 首页内容 -->
			<view v-if="currentPage === 'Home'" class="home-page">
				<text class="welcome-text">欢迎使用521Hertz校园表白墙</text>
			</view>

			<!-- 其他页面 -->
			<Discover v-if="currentPage === 'Discover'" />
			<Publish v-if="currentPage === 'Publish'" />
			<Message v-if="currentPage === 'Message'" />
			<Profile v-if="currentPage === 'Profile'" />
		</view>

		<!-- 自定义底部菜单栏 -->
		<CustomTabBar :list="tabList" :current="currentTab" @change="handleTabChange" />
	</view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar/CustomTabBar.vue';
import Discover from '@/pages/discover/index.vue'; // 发现页内容组件
import Publish from '@/pages/publish/index.vue'; // 发布页内容组件
import Message from '@/pages/message/index.vue'; // 消息页内容组件
import Profile from '@/pages/profile/index.vue'; // 我的页内容组件

export default {
	components: {
		CustomTabBar,
		Discover,
		Publish,
		Message,
		Profile
	},
	data() {
		return {
			currentTab: 0, // 当前选中的菜单项
			currentPage: 'Home', // 当前显示的页面组件
			tabList: [
				{
					pagePath: "Home",
					text: "首页",
					iconPath: "/static/tabbar/home.png",
					selectedIconPath: "/static/tabbar/home-active.png"
				},
				{
					pagePath: "Discover",
					text: "发现",
					iconPath: "/static/tabbar/discover.png",
					selectedIconPath: "/static/tabbar/discover-active.png"
				},
				{
					pagePath: "Publish",
					text: "",
					iconPath: "/static/tabbar/publish.png",
					selectedIconPath: "/static/tabbar/publish-active.png"
				},
				{
					pagePath: "Message",
					text: "消息",
					iconPath: "/static/tabbar/message.png",
					selectedIconPath: "/static/tabbar/message-active.png"
				},
				{
					pagePath: "Profile",
					text: "我的",
					iconPath: "/static/tabbar/profile.png",
					selectedIconPath: "/static/tabbar/profile-active.png"
				}
			]
		};
	},
	methods: {
		handleTabChange(index) {
			this.currentTab = index;
			this.currentPage = this.tabList[index].pagePath;
		}
	}
};
</script>

<style lang="scss">
.page-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.container {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.home-page {
	padding: 40rpx;
	text-align: center;
}

.welcome-text {
	font-size: 36rpx;
	color: $uni-color-title;
	font-weight: 500;
}
</style>
